<template>
  <t-layout-page>
    <t-layout-page-item>
      <t-radio
        v-model="theme"
        :options="themeList"
        type="button"
        style="margin-bottom: 20px"
      />
      <t-chart
        :options="options"
        :theme="theme"
        style="width: 100%; height: 500px"
      />
    </t-layout-page-item>
  </t-layout-page>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const xData = (function () {
  let data: string[] = []
  for (let i = 1; i < 13; i++) {
    data.push(i + '月份')
  }
  return data
})()
const options = ref({
  title: {
    text: '本年商场顾客男女人数统计',
    x: '4%',
    textStyle: {
      color: '#fff',
      fontSize: '22',
    },
    subtextStyle: {
      color: '#90979c',
      fontSize: '16',
    },
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
      textStyle: {
        color: '#fff',
      },
    },
  },
  grid: {
    borderWidth: 0,
    top: 110,
    bottom: 95,
    textStyle: {
      color: '#fff',
    },
  },
  legend: {
    x: '4%',
    top: '8%',
    textStyle: {
      color: '#90979c',
    },
    data: ['女', '男', '平均'],
  },

  calculable: true,
  xAxis: [
    {
      type: 'category',
      axisLine: {
        lineStyle: {
          color: '#90979c',
        },
      },
      splitLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      splitArea: {
        show: false,
      },
      axisLabel: {
        interval: 0,
      },
      data: xData,
    },
  ],
  yAxis: [
    {
      type: 'value',
      splitLine: {
        show: false,
      },
      axisLine: {
        lineStyle: {
          color: '#90979c',
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        interval: 0,
      },
      splitArea: {
        show: false,
      },
    },
  ],
  dataZoom: [
    {
      show: true,
      height: 30,
      xAxisIndex: [0],
      bottom: 30,
      start: 10,
      end: 80,
      handleIcon:
        'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
      handleSize: '110%',
    },
    {
      type: 'inside',
      show: true,
      height: 15,
      start: 1,
      end: 35,
    },
  ],
  series: [
    {
      name: '女',
      type: 'bar',
      stack: '总量',
      barMaxWidth: 35,
      barGap: '10%',
      itemStyle: {
        normal: {
          label: {
            show: true,
            textStyle: {
              color: '#fff',
            },
            position: 'inside',
            formatter: function (p) {
              return p.value > 0 ? p.value : ''
            },
          },
        },
      },
      data: [
        709, 1917, 2455, 2610, 1719, 1433, 1544, 3285, 5208, 3372, 2484, 4078,
      ],
    },

    {
      name: '男',
      type: 'bar',
      stack: '总量',
      itemStyle: {
        normal: {
          barBorderRadius: 0,
          label: {
            show: true,
            position: 'inside',
            formatter: function (p) {
              return p.value > 0 ? p.value : ''
            },
          },
        },
      },
      data: [327, 1776, 507, 1200, 800, 482, 204, 1390, 1001, 951, 381, 220],
    },
    {
      name: '总数',
      type: 'line',
      symbolSize: 10,
      symbol: 'circle',
      itemStyle: {
        normal: {
          barBorderRadius: 0,
          label: {
            show: true,
            position: 'top',
            formatter: function (p) {
              return p.value > 0 ? p.value : ''
            },
          },
        },
      },
      data: [
        1036, 3693, 2962, 3810, 2519, 1915, 1748, 4675, 6209, 4323, 2865, 4298,
      ],
    },
  ],
})

const theme = ref('')
const themeList = ref([
  { label: '默认', value: '' },
  { label: 'light', value: 'light' },
  { label: 'dark', value: 'dark' },
])
</script>
